<template>
    <div class="text_contaner">
            <span class="falls_text_item"
            :class="isAnimation ? 'falls_animation' :''"
            v-for="(item,index) in texts"
            :key="index"
            :style="{
                animationDelay:getTime(index),
                animationPlayState:animationState,
                animationDuration: `${duration}s`,
                '--top':`${-Number(top)}px`
            }"
            @webkitAnimationStart="animationStart"
            @animationstart="animationStart"
            @webkitAnimationEnd="animationEnd"
            @animationEnd="animationEnd"
            >{{ item }}</span>
    </div>
</template>

<script setup lang="ts">
import { debounce } from '../Autils/index';
import {CommonFn,getTextArr} from '../Ahooks/index'

defineOptions({
    name:'Fall'
})

const props = defineProps({
    text: {
        type: String,
        default:''
    },
    immediately: {
        type: Boolean,
        default:true
    },
    duration: {
        type: [String, Number],
        default:0.5
    },
    top: {
        type: [String, Number],
        default:100
    },
    model: {
        type: String,
        default:'random'
    },
    intervalTime: {
        type: Number,
        default:0.5
    }
})

const { isAnimation,
        animationState,
        start,
        paused,
        rest
        } = CommonFn()

const { texts } = getTextArr(props)    

const getTime = (index) => {
    switch (props.model) {
        case 'random':
            return `${Math.random() * props.intervalTime}s`
        case 'top':
            return `${index*props.intervalTime}s`
        case 'bottom':
            return `${(texts.value.length - index) * props.intervalTime}s`
    }
    return `${Math.random() *props.intervalTime}s`
}

const emits = defineEmits(["onStart",'onEnd'])

const animationStart = debounce(() => {
            emits('onStart')
        })


const animationEnd = debounce(() => {
            emits('onEnd')
        })

if (props.immediately) {
    start()
} else {
    paused()
}
defineExpose({start,paused,rest})
</script>
<style lang="less" scoped>
@import url("~/ACommonLess/index.less");
 

.falls_text_item{
    position: relative;
    display: inline-block;
    
    opacity: 0;  
}

.falls_animation{
    animation-name: falls;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes falls {
    0%{
        top:var(--top);
        opacity: 0;  
        
    }
    50%{
    //   opacity: 1;  
    }
    100%{
        top:0;
        opacity: 1;
    }
}
</style>